import { Button, Space, TypographyText } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { clPointApi } from '@/apis'
import jdCouponApi from '@/apis/jdCouponApi'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { download } from '@/utils'

export default defineComponent({
  name: 'UserLogList',
  props: {
    robotId: {
      type: [String, Number],
      required: true
    }
  },
  setup(props) {
    const tableRef = ref({} as ProTableRef)
    const exportLoading = ref(false)
    const tableConfig = ref({
      fixedHeight: 500,
      options: {
        border: true,
        align: 'center',
        columns: [
          {
            title: '时间',
            field: 'createTime',
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss']
          },
          {
            title: '状态',
            slots: {
              default: 'status'
            }
          }
        ],
        columnConfig: {
          minWidth: 100,
          resizable: true
        },
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await clPointApi.getUserLogList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                robotId: props.robotId,
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    return {
      tableRef,
      tableConfig,
      exportLoading
    }
  },
  render() {
    return (
      <div>
        <ProTable
          v-slots={{
            status: ({ row }) => {
              return (
                <Space>
                  {row.eventType == 41002 ? (
                    <TypographyText type="danger">下线</TypographyText>
                  ) : (
                    <TypographyText type="success">上线</TypographyText>
                  )}
                </Space>
              )
            }
          }}
          ref="tableRef"
          {...this.tableConfig}
        />
      </div>
    )
  }
})
